<template>
	<view>
		<view class="membership-tiers">
			<view class="tiers-title">
				<image src="/static/logo.png" class="tiers-image" mode=""></image>
				<view class="title-font">
					<view class="font-name">设备地道口</view>
					<view class="font-grade">当前等级: -</view>
				</view>
			</view>
			<view class="tiers-content">
				<view class="content-left">
					<view class="left-grade">当前等级</view>
					<view class="membership-growth">
						<view class="ordinary-member">普通会员</view>
						<view class="current-growth">
							<text>当前成长值 0</text>
							<u-icon name="arrow-right" color="#fff" size="20"></u-icon>
						</view>
					</view>
				</view>
				<view class="content-right">
					<image src="/static/logo.png" class="right-image" mode=""></image>
					<view class="growth-value">满100可升级</view>
				</view>
			</view>
		</view>
		<view class="member-description">
			说明
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.membership-tiers{
		height: 320rpx;
		background-color: rgb(52, 56, 70);
		padding: 30rpx 20rpx 20rpx 20rpx;
		color: #fff;
	}
	.tiers-image{
		width: 150rpx;
		height: 150rpx;
		border-radius: 100%;
	}
	.tiers-title{
		display: flex;
		align-items: center;
	}
	.title-font{
		margin-left: 20rpx;
	}
	.font-name{
		font-size: 40rpx;
	}
	.font-grade{
		margin-top: 20rpx;
		border: 1px solid #fff;
		border-radius: 40rpx;
		text-align: center;
		padding: 5rpx 10rpx 5rpx 10rpx;
	}
	.tiers-content{
		margin-top: 40rpx;
		background-color: rgb(146, 151, 165);
		padding-bottom: 100rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: space-between;
	}
	.content-left{
		width: 50%;
		padding:40rpx 0rpx 0rpx 0rpx;
	}
	.left-grade{
		width: 140rpx;
		background-color: rgb(65, 68, 76);
		border-radius: 0rpx 40rpx 40rpx 0rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
	}
	.membership-growth{
		margin-left: 20rpx;
	}
	.ordinary-member{
		font-size: 60rpx;
		margin-top: 40rpx;
		font-weight: bold;
	}
	.current-growth{
		margin-top: 40rpx;
		display: flex;
		align-items: center;
	}
	.content-right{
		margin-right: 20rpx;
	}
	.right-image{
		width: 150rpx;
		height: 150rpx;
		margin-left: 5rpx;
	}
	.growth-value{
		margin-top: 90rpx;
	}
	.member-description{
		margin-top: 260rpx;
		font-size: 45rpx;
		font-weight: bold;
		padding-left: 20rpx;
		border-left: 5px solid red;
		margin-left: 20rpx;
	}
</style>
